<template>
  <div class="grid_cont">
    <div style="display:flex;">
      <div style="width: 3px;height: 18px;background-color: rgba(204,53,47,1);"></div>
      <div style="margin-left:10px;font-size: 16px;line-height: 16px;">详情</div>
    </div>
    <div style="width: 100%;height: 1px;background-color:rgba(245,245,245,1);margin-top:16px;margin-bottom:30px;">
    </div>
    <el-form :model="formParams" v-loading="loading" element-loading-text="Loading..."
      style="margin-left:14px;text-align:right;" label-width="112px">
      <el-row>
        <el-col :span="8" style="min-width:300px;">
          <el-form-item label="姓名：" prop="residentName">
            <el-input disabled v-model="formParams.residentName" style="width: 280px;" />
          </el-form-item>
        </el-col>
        <el-col :span="8" style="min-width:300px;">
          <el-form-item label="性别：" prop="sex">
            <el-radio-group disabled v-model="formParams.sex">
              <el-radio label='1'>男</el-radio>
              <el-radio label='2'>女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" style="min-width:300px;">
          <el-form-item label="身份证号：" prop="idNumber">
            <el-input disabled v-model="formParams.idNumber" style="width: 280px;" />
          </el-form-item>
        </el-col>
        <el-col :span="8" style="min-width:300px;">
          <el-form-item label="出生日期：" prop="birthDate">
            <el-date-picker disabled v-model="formParams.birthDate" format="YYYY-MM-DD" type="date" placeholder="选择日期"
              style="width: 280px;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" style="min-width:300px;">
          <el-form-item label="类型：" prop="type">
            <el-input disabled v-model="formParams.type" style="width: 280px;" />
          </el-form-item>
        </el-col>
        <el-col :span="8" style="min-width:300px;">
          <el-form-item label="联系电话：" prop="phone">
            <el-input disabled v-model="formParams.phone" style="width: 280px;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" style="min-width:300px;">
          <el-form-item label="户籍地：" v-if="formParams.type !== '流动居民'" prop="address">
            <el-input disabled v-model="formParams.address" style="width: 280px;" />
          </el-form-item>
        </el-col>
        <el-col :span="8" style="min-width:300px;">
          <el-form-item label="民族：" v-if="formParams.type !== '流动居民'" prop="nation">
            <el-input disabled v-model="formParams.nation" style="width: 280px;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" style="min-width:300px;">
          <el-form-item label="是否户主：" v-if="formParams.type !== '流动居民'" prop="isHolder" style="line-height: 40px;">
            <el-radio-group v-model="formParams.isHolder" disabled>
              <el-radio label='1'>是</el-radio>
              <el-radio label='0'>否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8" style="min-width:300px;">
          <el-form-item label="年收入(万)：" v-if="formParams.type !== '流动居民'" prop="income">
            <el-input disabled v-model="formParams.income" style="width: 280px;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" style="min-width:300px;">
          <el-form-item label="与户主关系：" prop="relationship"
            v-if="formParams.type !== '流动居民' && formParams.isHolder === '0'">
            <el-input disabled v-model="formParams.relationship" style="width: 280px;" />
          </el-form-item>
          <el-form-item label="选择户主：" v-if="formParams.type !== '流动居民' && formParams.isHolder === '0'" prop="holderId">
            <el-input disabled placeholder="暂无" v-model="formParams.holderId" style="width: 280px;" />
          </el-form-item>
          <el-form-item label="选择房屋：" v-if="formParams.type !== '流动居民'" prop="houseNumber">
            <el-input disabled v-model="formParams.houseNumber" style="width: 280px;" />
          </el-form-item>
        </el-col>
        <el-col :span="8" style="min-width:300px;">
          <el-form-item label="照片：" v-if="formParams.type !== '流动居民'" prop="area">
            <UploadImg v-if="formParams.photo" disabled v-model="formParams.photo" :limit="1" />
            <el-upload v-else disabled class="avatar-uploader" style="position:relative">
              <el-icon disabled class="avatar-uploader-icon" />
              <div style="position:absolute;cursor: not-allowed;user-select: none;color: #999;">暂无照片</div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="display:flex;margin-bottom:20px;">
      <div style="width: 3px;height: 18px;background-color: rgba(204,53,47,1);"></div>
      <div style="margin-left:10px;font-size: 16px;line-height: 16px;">居民标签</div>
    </div>
    <el-form>
      <el-row>
        <el-col :span="16">
          <el-form-item v-model="optionlabel" style="margin-left:14px;"
            :rules="[{ required: true, message: '标签类型不能为空！' }]">
            <div v-for="(item, index) in optionlabel" class="identity_style" :key="item.value"
              :class="{ selected: item.selected }" :title="item.label" @click="colorbtn(index)">
              {{ item.label }}</div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <div class="grid_cont2">
    <el-button class="grid_btn" @click="detailsbtn">返回</el-button>
  </div>
</template>

<script lang="ts" setup>
const { push } = useRouter() // 路由
const route = useRoute()
import * as getgridApi from '@/api/countryside/gridmanagement/index'
import globalApi from '@/api/spb/global'
const formParams = reactive({
  residentName: '',
  idNumber: '',
  type: '',
  birthDate: '',
  address: '',
  optionplace: [],
  phone: '',
  houseNumber: '',
  nation: '',
  isHolder: '1',
  holderId: '',
  income: '',
  relationship: '',
  sex: '1',
  photo: '',
  title: ''
})
const loading = ref(true) // 列表加载中
const optionlabel = ref([])
/** 获取居民类型列表 */
const optiontype = ref([])
const gettypeTypeData = () => {
  const params = {
    pageNo: 1,
    pageSize: 100,
    dictType: 'countryside_resident_type'
  }
  globalApi.getDictData(params).then((res) => {
    optiontype.value = res.list
  })
}
// 居民类型字段映射
const typetypeRelate = (item) => {
  let content = ''
  optiontype.value.forEach((t) => {
    if (t.value == item) {
      content = t.label
    }
  })
  return content
}
/** 获取民族类型列表 */
const optionnation = ref([])
const getnationTypeData = () => {
  const params = {
    pageNo: 1,
    pageSize: 100,
    dictType: 'countryside_nation'
  }
  globalApi.getDictData(params).then((res) => {
    optionnation.value = res.list
  })
}
// 民族字段映射
const nationtypeRelate = (item) => {
  let content = ''
  optionnation.value.forEach((t) => {
    if (t.value == item) {
      content = t.label
    }
  })
  return content
}
/** 获取与户主关系类型列表 */
const optionrelation = ref([])
const getholdTypeData = () => {
  const params = {
    pageNo: 1,
    pageSize: 100,
    dictType: 'countryside_relationship'
  }
  globalApi.getDictData(params).then((res) => {
    optionrelation.value = res.list
  })
}
// 与户主关系类型字段映射
const holdtypeRelate = (item) => {
  let content = ''
  optionrelation.value.forEach((t) => {
    if (t.value == item) {
      content = t.label
    }
  })
  return content
}
/** 获取户主列表 */
const optionholdId = ref([])
const getholdIdTypeData = () => {
  getgridApi.getHolder().then((res) => {
    optionholdId.value = res
  })
}
// 户主字段映射
const holdIdtypeRelate = (item) => {
  let content = ''
  optionholdId.value.forEach((t) => {
    if (t.id == item) {
      content = t.residentName
    }
  })
  return content
}

/** 返回 */
const detailsbtn = () => {
  push({
    name: 'residentDossier',
  })
}
/** 获取居民标签列表 */
const getresidentLabel = () => {
  const params = {
    pageNo: 1,
    pageSize: 100,
    dictType: 'countryside_resident_label'
  }
  globalApi.getDictData(params).then((res) => {
    optionlabel.value = []
    res.list.forEach((item) => {
      return optionlabel.value.push({
        label: item.label,
        value: item.value,
        selected: false
      })
    })
  })
}
/** 选项卡颜色 */
const colorbtn = (index) => {
  //   optionlabel.value[index].selected = !optionlabel.value[index].selected;
}
//获取数据
let labelList2 = reactive([])
const getData = () => {
  getgridApi.getResidentdetail(route.query.id).then((res) => {
    res.residentLabel = res.residentLabel.split(',')
    labelList2 = res.residentLabel
    optionlabel.value.forEach((item) => {
      labelList2.forEach((item2) => {
        if (item2 == item.value) {
          item.selected = true
        }
      })
    })
    formParams.residentName = res.residentName
    formParams.idNumber = res.idNumber
    formParams.type = typetypeRelate(res.residentType)
    formParams.birthDate = String(res.birthDate)
    formParams.address = res.address
    formParams.phone = res.telephone
    formParams.houseNumber = res.houseNumber
    formParams.nation = nationtypeRelate(res.nation)
    formParams.isHolder = JSON.stringify(res.isHolder)
    formParams.income = res.income
    formParams.relationship = holdtypeRelate(res.relationship)
    formParams.holderId = holdIdtypeRelate(res.holderId)
    formParams.sex = JSON.stringify(res.sex)
    formParams.photo = res.photo
    loading.value = false
  }).catch((error) => {
    loading.value = false
  })
}

onMounted(() => {
  getresidentLabel()
  gettypeTypeData()
  getnationTypeData()
  getholdTypeData()
  getholdIdTypeData()
  getData()
})
onUpdated(() => {
  getData()
})

</script>
<style scoped>
.grid_cont {
  min-height: 600px;
  background: #fff;
}

.grid_cont2 {
  width: 100%;
  background: #fff;
  height: 65px;
  justify-Content: center;
  align-items: center;
  display: flex;
  padding: 0;
  box-shadow: 0px -2px 6px 0px rgba(188, 188, 188, 0.65);
}

.grid_btn {
  width: 80px;
  height: 30px;
  background-color: #FF9900;
  border: none;
  color: #fff;
}

.grid_btn:hover {
  opacity: 0.8;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

::v-deep .avatar-uploader .el-upload {
  border: 1px solid var(--el-border-color);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  cursor: not-allowed;
}

::v-deep .el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  text-align: center;
  cursor: not-allowed;
  background-color: var(--el-disabled-bg-color);
}

.inputstyle {
  width: 257px;
  height: 28px;
  line-height: 28px;
  color: var(--el-disabled-text-color);
  -webkit-text-fill-color: var(--el-disabled-text-color);
  cursor: not-allowed;
  background-color: var(--el-disabled-bg-color);
  box-shadow: 0 0 0 1px var(--el-disabled-border-color);
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  padding: 1px 11px;
  text-align: left;
}

.identity_style {
  min-width: 77px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 5px;
  padding: 0 5px;
  margin: 0px 5px 10px 5px;
  font-size: 12px;
  border: none;
  cursor: pointer;
  user-select: none;
  background: #EFF0F0;
  border: 1px solid #EFF0F0;
  cursor: not-allowed;
  color: #888;
  font-weight: 550;
}

.selected {
  border: 1px solid rgba(16, 90, 215, 1);
  color: #437BC7;
  background: #F1F8FF;
}

.identity_style:hover {
  opacity: 0.8;
}

::v-deep .upload .el-upload .el-upload-dragger {
  border: 1px solid var(--el-border-color-darker) !important;
}

::v-deep .upload .el-upload .el-upload-dragger:hover {
  border: 1.5px solid #ccc !important;
}
</style>